<!DOCTYPE html>
<html class="window-login">
<head>
    <#import "./common/common.macro.ftl" as netCommon>
    <@netCommon.commonStyle />
    <link rel="stylesheet" href="${request.contextPath}/static/adminlte/plugins/iCheck/square/blue.css">
    <title>${I18n.admin_name}</title>
</head>
<body class="hold-transition login-page">
<div class="login-box">
    <div class="login-logo">
        <a><b>DE</b>JOB</a>
    </div>
    <form id="loginForm" method="post">
        <div class="login-box-body">
            <p class="login-box-msg">${I18n.admin_name}</p>
            <div class="form-group has-feedback">
                <input type="text" name="userName" class="form-control" placeholder="${I18n.login_username_placeholder}"
                       maxlength="18">
                <span class="glyphicon glyphicon-user form-control-feedback"></span>
            </div>
            <div class="form-group has-feedback">
                <input type="password" name="password" class="form-control"
                       placeholder="${I18n.login_password_placeholder}" maxlength="18">
                <span class="glyphicon glyphicon-lock form-control-feedback"></span>
            </div>
            <div class="row">
                <div class="col-xs-8">
                    <div class="checkbox icheck">
                        <label>
                            <input type="checkbox" name="ifRemember"> &nbsp; ${I18n.login_remember_me}
                        </label>
                    </div>
                </div><!-- /.col -->
                <div class="col-xs-4">
                    <button type="submit" class="btn btn-primary btn-block btn-flat">${I18n.login_btn}</button>
                </div>
            </div>
        </div>
    </form>
</div>
<!--  底部  -->
<div class="el-login-footer">
    <span>Copyright © 2024-2025 Success.Li All Rights Reserved.</span>
</div>
<@netCommon.commonScript />
<script src="${request.contextPath}/static/adminlte/plugins/iCheck/icheck.min.js"></script>
<script src="${request.contextPath}/static/js/login.1.js"></script>

</body>
<style type="text/css">
    .window-login {
        background-image: url('${request.contextPath}/static/login-background.jpg');
        background-size: cover;
    }

    body.login-page {
        background: none;
    }


    .login-logo a {
        color: #595858;
    }

    .login-box {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        width: 460px;
        background-image: url('${request.contextPath}/static/wood-grain-low.jpg');
        background-size: cover;
        border-top-left-radius: 1em;
        border-top-right-radius: 2em;
        border-bottom-right-radius: 2em;
        border-bottom-left-radius: 1em;

    }

    #loginForm {
        width: 100%;
        max-width: 560px;
        margin: 0 auto;
        border-top-right-radius: 2em;
        border-bottom-right-radius: 2em;

        .login-box-msg {
            font-size: 18px;
            font-weight: 600;
            padding: 10px 20px 5px 20px;
        }

        .form-group {
            margin: 26px 0;
        }

        input.form-control {
            border-radius: 10px;
            height: 42px;
        }

        .btn.btn-flat {
            border-radius: 6px;
            border-width: 0px;
        }

        .btn-primary {
            background-color: #409EFF;
            border-color: #3c8dbc;
        }
    }

    .el-login-footer {
        height: 40px;
        line-height: 40px;
        position: fixed;
        bottom: 0;
        width: 100%;
        text-align: center;
        color: #fff;
        font-family: Arial;
        font-size: 12px;
        letter-spacing: 1px;
    }

</style>
</html>
